import { PlusOutlined } from '@ant-design/icons';
import { Input, Tag } from 'antd';
import { useState } from 'react';

const TagList = () => {
  // 初始化标签数据（与截图一致）
  const [tags, setTags] = useState<string[]>([
    '很有想法的',
    '专注设计',
    '辣~',
    '大长腿',
    '川妹子',
    '海纳百川',
  ]);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  // 显示输入框
  const showInput = () => {
    setInputVisible(true);
  };

  // 确认添加标签
  const handleInputConfirm = () => {
    if (inputValue && !tags.includes(inputValue)) {
      setTags([...tags, inputValue]);
    }
    setInputValue('');
    setInputVisible(false);
  };

  return (
    <div style={{ padding: '16px 0' }}>
      <h3 style={{ marginBottom: '8px' }}>标签</h3>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        {/* 循环渲染已有标签 */}
        {tags.map((tag, index) => (
          <Tag
            key={index}
            closable
            onClose={() => {
              // 删除标签逻辑（可选：根据需求决定是否允许删除）
              const newTags = [...tags];
              newTags.splice(index, 1);
              setTags(newTags);
            }}
            style={{
              border: '1px solid #d9d9d9',
              backgroundColor: '#fff',
              color: '#666',
            }}
          >
            {tag}
          </Tag>
        ))}

        {/* 添加标签按钮 */}
        {inputVisible ? (
          <Input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onBlur={handleInputConfirm}
            onKeyDown={(e) => e.key === 'Enter' && handleInputConfirm()}
            autoFocus
            style={{
              width: '80px',
              border: '1px dashed #d9d9d9', // 虚线边框
              borderRadius: '4px',
            }}
            placeholder="输入标签"
          />
        ) : (
          <Tag
            onClick={showInput}
            style={{
              border: '1px dashed #d9d9d9', // 虚线边框
              backgroundColor: '#fff',
              cursor: 'pointer',
            }}
          >
            <PlusOutlined style={{ color: '#999' }} />
          </Tag>
        )}
      </div>
    </div>
  );
};
export default TagList;
